<template>
    <div class="body">
        <a @click="jumpPage">sunbutton</a>
    </div>
</template>

<script>
export default {
    name: "PrettyButton",
    methods: {
        jumpPage() {
            this.$router.push({
                path: '/dynamic-table',
                query: { params: encodeURIComponent(JSON.stringify({jh:'牛页1-3-401HF'})) }
            })
        }
    }
};
</script>

<style lang="less" scoped>
.body {
    position: relative;
    width: 500px;
    height: 500px;
    border-radius: 30px;
    background: #000;
    a {
        text-decoration: none;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 24px;
        background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
        background-size: 400%;
        width: 400px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        color: #fff;
        text-transform: uppercase;
        border-radius: 50px;
        z-index: 1;
        &::before {
            content: "";
            position: absolute;
            left: -5px;
            right: -5px;
            top: -5px;
            bottom: -5px;
            background: linear-gradient(
                90deg,
                #03a9f4,
                #f441a5,
                #ffeb3b,
                #03a9f4
            );
            background-size: 400%;
            border-radius: 50px;
            filter: blur(20px);
            z-index: -1;
        }
        &:hover {
            animation: sun 8s infinite;
            &::before {
                animation: sun 8s infinite;
            }
        }
    }
}

@keyframes sun {
    100% {
        background-position: -400% 0;
    }
}
</style>
